﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Compare.aspx.cs" Inherits="EarringsRecommendationWeb.Compare" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Compare Earrings</title>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-theme.css" rel="stylesheet" />

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>   
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#form-nav-bar').load('navbar.html');
            $.getScript("js/Login.js", function () { });
        });
    </script>
    <script src="js/toast.js" type="text/javascript"></script>
    <script src="js/formatmoney.js"></script>
</head>
<body>
    
    <div class="alert alert-success" role="alert" style="display:none; z-index: 1000; position: absolute; left:0px; top: 50px;">
      <span>populate alert</span>
    </div>
    <!-- Navigation -->
    <nav id="form-nav-bar" class="navbar navbar-inverse navbar-static-top" role="navigation">        
        <!-- /.container -->
    </nav>
    <form runat="server">
    <!-- Page Content -->
    <div class="container">
        <div class="col-md-12">
            <div class="row">
                <a href="index3.aspx">กลับไปลองต่างหู</a>
            </div>
            <br>
            <div class="col-md-3">
               
                <img id="img-1" style="width:230px;" class="img-thumbnail" alt="ไม่มีรูป" src="">
                <p id="name-1">ชื่อต่างหู</p> 
                <p id="price-1"></p>
                <button id="buy-1" type="button"  class="btn btn-info glyphicon glyphicon-shopping-cart">สั่งซื้อ</button>
                <hr>
                <p id="detail-1">รายละเอียด</p>
            </div>
            <div class="col-md-3">
                <img id="img-2" style="width:230px;" class="img-thumbnail" alt="ไม่มีรูป" src="">
                <p id="name-2">ชื่อต่างหู</p> 
                <p id="price-2"></p>
                <button id="buy-2" type="button"  class="btn btn-info glyphicon glyphicon-shopping-cart">สั่งซื้อ</button>
                <hr>
                <p id="detail-2">รายละเอียด</p>
            </div>
            <div class="col-md-3">
                <img id="img-3" style="width:230px;" class="img-thumbnail" alt="ไม่มีรูป" src="">
                <p id="name-3">ชื่อต่างหู</p> 
                <p id="price-3"></p>
                <button id="buy-3" type="button"  class="btn btn-info glyphicon glyphicon-shopping-cart">สั่งซื้อ</button>
                <hr>
                <p id="detail-3">รายละเอียด</p>
            </div>
            <div class="col-md-3">
                <img id="img-4" style="width:230px;" class="img-thumbnail" alt="ไม่มีรูป" src="">
                <p id="name-4">ชื่อต่างหู</p> 
                <p id="price-4"></p>
                <button id="buy-4" type="button" class="btn btn-info glyphicon glyphicon-shopping-cart">สั่งซื้อ</button>
                <hr>
                <p id="detail-4">รายละเอียด</p>
            </div>
        </div>
    </div>
    <!-- /.container -->
    <div class="container">
        <hr>
        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-md-12">
                    <p>
                        Copyright &copy; Your Website 2015
                    </p>
                </div>
            </div>
        </footer>
    </div>
    <!-- /.container -->
    <script type="text/javascript">
        $(document).ready(function () {
            var arr = EarringsCompare[0];
            for (var i = 0; i < arr.length; i++) {
                var index = i + 1;
                $('#img-' + index).attr('src', arr[i].CompareImg);
                $('#name-' + index).html(arr[i].Er_Name);
                $('#price-' + index).html('ราคา ' + Number(arr[i].Er_Price).formatMoney() + ' บาท');
                var text = '';
                text += '<p><b>รูปแบบ </b>' + arr[i].Er_Styles_Name + '</p>';
                text += '<p><b>รูปทรง </b>' + arr[i].Er_Shape_Name + '</p>';
                text += '<p><b>สี </b>' + arr[i].Er_Color_Name + '</p>';
                text += '<p><b>แป้นหลัง </b>' + arr[i].Er_Ear_Back + '</p>';
                text += '<p><b>อัญมณีหลัก </b>' + arr[i].Er_Gemstone + '</p>';
                text += '<p><b>รายละเอียด </b>' + arr[i].Er_Detail + '</p>';
                $('#detail-' + index).html(text);
                $('#buy-' + index).attr('er_code',arr[i].Er_Code); 
            }
        });

        $(document).on('click', '[id^=buy]', function () {
            addToCart($(this).attr('er_code'));
        });

        function addToCart(er_code) {            
            var qty = 1;
            //call ajax
            $.ajax({
                type: "POST",
                dataType: "json",
                crossDomain: true,
                url: "http://localhost:49331/WSRestFul.asmx/RecalQty",
                data: { ERCode: er_code, Qty: qty }
            }) //ajax
            .done(function (data) {
                if (data.result === 'success') {
                    Toast.init({
                        "selector": ".alert-success"
                    });
                    Toast.show("เพิ่มต่างหูเข้าตะกร้าสินค้าของท่านแล้ว");

                    var tmp = parseInt($('span.badge').html());
                    tmp++;
                    $('span.badge').html(tmp);
                }
            }) //done
            .fail(function (data) {
                bootbox.dialog({
                    title: 'Fatal Error',
                    message: '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
                });//boobox
            }) //fail
        }
    </script>
    </form>
</body>
</html>
